<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
	
	
	
	<ui:define name="content">
		<c:set target="#{userBean}" property="action" value="ADD_STADIUM"/>
	   <h:outputScript library="js" name="jquery-1.7.1.min.js" />
	   <h:outputScript library="js" name="stadium.js" />
	   <h:outputScript library="js" name="dhtmlgoodies_slider.js" />
	  
	  <link href="resources/css/slider.css" rel="stylesheet" type="text/css" />
	   	    
	   <h:form id="stadiumForm" rendered="#{userBean.permissions}">
	    	<table>
	    		<tr>
	    			<td><h:outputLabel>Name</h:outputLabel></td>
	    			<td><h:inputText id="name" value="#{stadiumBean.name}" required="true" requiredMessage="Please insert name"/></td>
	    			<td><h:message for="name" style="background-color:red;"/></td>
	    		</tr>
	    		<tr>
	    			<td><h:outputLabel >City</h:outputLabel></td>
	    			<td><h:inputText id="city" value="#{stadiumBean.city}" required="true" requiredMessage="Please insert city"/></td>
	    			<td><h:message for="city" style="background-color:red;"/></td>
	    		</tr>
	    		<tr>
	    			<td><h:outputLabel >Capacity</h:outputLabel></td>
	    			<td><h:inputText onkeyup = "init()" id="capacity" value = "#{stadiumBean.capacity}" />	</td>
	    			<td><div id = "slider"/></td>
	    		</tr>
	    		<tr>
	    			<td><h:outputLabel >Tribune A</h:outputLabel></td>
	    			<td><h:inputText onkeyup = "init()" id="tribune0" value = "#{stadiumBean.tribune0}"/></td>	
	    			<td><div id = "slider0"/></td>
	    		</tr>
	    		<tr>
	    			<td><h:outputLabel >Tribune B</h:outputLabel></td>
	    			<td><h:inputText onkeyup = "init()" id="tribune1" value = "#{stadiumBean.tribune1}"/></td>	
	    			<td><div id = "slider1"/></td>
	    		</tr>
	    		<tr>
	    			<td><h:outputLabel >Tribune C</h:outputLabel></td>
	    			<td><h:inputText onkeyup = "init()" id="tribune2" value = "#{stadiumBean.tribune2}"/></td>	
	    			<td><div id = "slider2"/></td>
	    		</tr>
	    		<tr>
	    			<td><h:outputLabel >Tribune D</h:outputLabel></td>
	    			<td><h:inputText onkeyup = "init()" id="tribune3" value = "#{stadiumBean.tribune3}"/></td>	
	    			<td><div id = "slider3"/></td>
	    		</tr>
	    		<tr>
	    			<td><h:commandButton id = "save" onclick = "init()" action="#{stadiumBean.save}" value="save"/></td>
	    			<td><h:message for="save" style= "color:red;" /></td>
	    		</tr>  	
	        			
	    	</table>
	    </h:form>
	    
	    <h:outputLabel value="You don't have permission to this page" rendered="#{!userBean.permissions}"/>
	    
	    
	    
	    <script type="text/javascript">
	    	
	    	//sliders
	    	form_widget_amount_slider('slider', document.forms['stadiumForm'].elements['stadiumForm:capacity'],
	    			200,5000,50000,"init()");
	    	
	    	form_widget_amount_slider('slider0', document.forms['stadiumForm'].elements['stadiumForm:tribune0'],
	    			200,1,5,"init()");
	    	
	    	form_widget_amount_slider('slider1', document.forms['stadiumForm'].elements['stadiumForm:tribune1'],
	    			200,1,5,"init()");
	    	
	    	form_widget_amount_slider('slider2', document.forms['stadiumForm'].elements['stadiumForm:tribune2'],
	    			200,1,5,"init()");
	    	
	    	form_widget_amount_slider('slider3', document.forms['stadiumForm'].elements['stadiumForm:tribune3'],
	    			200,1,5,"init()");
		</script>
	   
	    <canvas width="800px" height="600px" id="canvas"  style = " margin: 0 auto; " >
       		Canvas not supported.          
       </canvas> 
	   	
	   	
	   	
	   
     	
     	
	    
	   
        
	</ui:define>

</ui:composition>
</html>